<template>
  <div id="background_layer">
    <div
      id="background_main"
      style="
        background-color: black;
        background-position: center top;
        cursor: auto;
        background-size: auto;
        background-repeat: repeat;
      "
    >
      <div
        id="background"
        style="
          background-image: linear-gradient(
            90deg,
            rgba(29, 31, 39, 0) 0%,
            rgb(29, 31, 39) 20%,
            rgb(29, 31, 39) 80%,
            rgba(29, 31, 39, 0) 100%
          );
        "
      >
        <div class="SK-store-search-container">
          <div class="search-block">
            <div class="search-left">
              <div class="SK-condition">
                <button @click="getGameList('sale')">畅销</button
                ><button class="" @click="getGameList('grade')">评分</button
                ><button class="sort-price" @click="getGameList('price')">
                  价格<i class="fa fa-sort-asc"></i
                  ><i class="fa fa-sort-desc"></i>
                </button>
              </div>
              <ul class="search-results">
                <div>
                  <li
                    v-for="(game, index) in gameList"
                    :key="game.id"
                    @click="inGame(game)"
                  >
                    <a class="listed-game-block hover-card">
                      <div
                        class="sku_cover_box listed-game-img size_default"
                        style="width: 168px; height: 100px"
                      >
                        <img :src="game.page" />
                      </div>
                      <div class="listed-game-price">
                        <span
                          class="game-discount"
                          v-show="game.previousmoney != game.nowmoney"
                          >&nbsp;促销</span
                        ><span class="game-origin-price"
                          >￥{{ game.previousmoney }}</span
                        ><span class="game-sale-price"
                          >￥{{ game.nowmoney }}</span
                        >
                      </div>
                      <div class="listed-game-content">
                        <p class="title">
                          {{ game.name }}
                          <span
                            class="tag promotion"
                            v-show="game.count != null && game.count != 0"
                            >玩家数：{{ game.count }}</span
                          >
                          <span
                            class="tag promotion"
                            v-show="game.avggrade != null && game.avggrade != 0"
                            >评分：{{
                              parseFloat(game.avggrade).toFixed(1)
                            }}</span
                          >
                        </p>
                        <p class="tags">
                          <span class="tag-block">{{ game.gametype }}</span>
                        </p>
                      </div>
                    </a>
                  </li>
                </div>
              </ul>
            </div>
            <div class="search-right" id="search_tags_container">
              <div>
                <div class="search-filter-block">
                  <h2>按类型</h2>
                  <div class="search-tags">
                    <div
                      class="tag-block checked"
                      v-for="(type, index) in typeList"
                      :key="type.id"
                      @click="getGameByType(type)"
                    >
                      <span class="tag-block-wrapper"
                        ><i class="fa fa-square-o"></i>{{ type.typename }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqSaleBest, reqGradeBest, reqPriceGame, reqKeySelect } from "@/api";
export default {
  name: "Shop",
  data() {
    return {
      typeList: [
        { id: "1", typename: "动作" },
        { id: "2", typename: "射击" },
        { id: "3", typename: "策略" },
        { id: "4", typename: "冒险" },
        { id: "5", typename: "竞速" },
        { id: "6", typename: "角色扮演" },
      ],
      gradecode: 1,
      gameList: {},
      salecode: 1,
      sale: 0,
      pricecode: 2,
      choice: "sale",
    };
  },
  mounted() {
    this.getGameList(this.choice);
  },
  methods: {
    // 类型排序
    async getGameByType(type) {
      let gametype = type.typename;
      let result = await reqKeySelect({ gametype });
      if (result.code == 200) {
        this.gameList = result.data;
        if (this.gameList != null) {
          for (var i = 0; i < this.gameList.length; i++) {
            this.gameList[i].sale = parseInt(
              (100 *
                (this.gameList[i].previousmoney - this.gameList[i].nowmoney)) /
                this.gameList[i].previousmoney
            );
          }
        }
      } else {
        alert("未找到此类游戏");
      }
    },
    async getGameList(choice) {
      this.gameList = {};
      // 畅销排序
      if (choice == "sale") {
        if (this.salecode == 1) {
          this.salecode = 2;
        } else {
          this.salecode = 1;
        }
        let res = await reqSaleBest({ code: this.salecode });
        if (res.code == 200) {
          this.gameList = res.data;
          this.gameList = JSON.parse(
            JSON.stringify(this.gameList).replace(/gamename/g, "name")
          );
          if (this.gameList != null) {
            for (var i = 0; i < this.gameList.length; i++) {
              this.gameList[i].sale = parseInt(
                (100 *
                  (this.gameList[i].previousmoney -
                    this.gameList[i].nowmoney)) /
                  this.gameList[i].previousmoney
              );
            }
          }
        }
        // 评分排序
      } else if (choice == "grade") {
        if (this.gradecode == 1) {
          this.gradecode = 2;
        } else {
          this.gradecode = 1;
        }
        let res = await reqGradeBest({ code: this.gradecode });
        if (res.code == 200) {
          this.gameList = res.data;
          this.gameList = JSON.parse(
            JSON.stringify(this.gameList).replace(/gamename/g, "name")
          );
          if (this.gameList != null) {
            for (var i = 0; i < this.gameList.length; i++) {
              this.gameList[i].sale = parseInt(
                (100 *
                  (this.gameList[i].previousmoney -
                    this.gameList[i].nowmoney)) /
                  this.gameList[i].previousmoney
              );
            }
          }
        }
      } // 价格排序
      else {
        if (this.pricecode == 1) {
          this.pricecode = 2;
        } else {
          this.pricecode = 1;
        }
        let res = await reqPriceGame({ code: this.pricecode });
        if (res.code == 200) {
          this.gameList = res.data;
          if (this.gameList != null) {
            for (var i = 0; i < this.gameList.length; i++) {
              this.gameList[i].sale = parseInt(
                (100 *
                  (this.gameList[i].previousmoney -
                    this.gameList[i].nowmoney)) /
                  this.gameList[i].previousmoney
              );
            }
          }
        }
      }
    },
    inGame(game) {
      this.$router.push({
        path: "/detail",
        query: {
          gamename: game.name,
        },
      });
    },
  },
};
</script>

<style>
@import "../../assets/css/shop.css";
</style>
